<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>象过河云进销存</title>
		<style type="text/css">
			td {
				text-align: center;
				height: 50px;
			}

			p {
				margin: 8px 0;
				font-size: 16px;
				color: #333;
			}
		</style>
	</head>
	<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<link rel="stylesheet" href="css/index.css" />
	<body>
		<div id="app" style="width: 100%;min-width: 900px;">
			<div style="width: 100%;position: relative;">
				<img src="img/img1.png" style="width: 100%;" />
				<img src="img/img2.png"
					style="position: absolute;height: 77%;top: 20%;left: 0;right: 0;margin: auto;" />
			</div>
			<div style="display: flex;justify-content: center;margin-top: 30px;">
				<div style="text-align: center;width: 150px;">
					<img class="item-img" src="img/img3.png" />
					<div>复制专属链接</div>
				</div>
				<img class="space-img" src="img/img6.png" />
				<div style="text-align: center;width: 150px;">
					<img class="item-img" src="img/img4.png" />
					<div>将链接分享给好友</div>
				</div>
				<img class="space-img" src="img/img6.png" />
				<div style="text-align: center;width: 150px;">
					<img class="item-img" src="img/img5.png" />
					<div>您获得使用天数</div>
				</div>
			</div>
			<div style="display: flex;justify-content: center;margin: 30px 0;">
				<div class="url-view">
					<span>{{ url }}</span>
				</div>
				<div style="width: 152px;position: relative;" onclick="copyUrl()">
					<img src="img/img7.png" style="width: 134px;height: 36px;" />
					<img src="img/img8.png" style="position: absolute;height: 40px;top: 5px;right: 0;" />
				</div>
			</div>
			<div style="width: 100%;background-color: #FFEACC;display: flex;justify-content: center;">
				<div class="award-content">
					<div style="display: flex;align-items: center;justify-content: center;">
						<img src="img/img9.png" style="width: 28px;height: 28px;" />
						<div class="award_title">我的奖励</div>
						<img src="img/img9.png" style="width: 28px;height: 28px;" />
					</div>
					<table style="border: 0;width: 100%;margin-top: 20px;">
						<tr style="background-color: #F47C0C;height: 54px;color: white;">
							<th>邀请类型</th>
							<th>邀请用户</th>
							<th>邀请时间</th>
							<th>奖励天数</th>
						</tr>
						<tr style="border-bottom: 1px solid #D9D9D9;" v-for="(item, index) in list" :key='index'>
							<td style="font-weight: bold;">{{item.typeText}}</td>
							<td>{{item.phone}}</td>
							<td>{{item.createTime}}</td>
							<td style="font-weight: bold;">+{{item.rewardDays || 0}}天</td>
						</tr>
					</table>
					<div class="flex-center" style="height: 80px;">
						<a href="https://yun.xiangguohe.cn" style="color: #0044FF;text-decoration: none;">查看明细</a>
						<!-- <a href="http://192.168.2.65:9047" style="color: #0044FF;text-decoration: none;">查看明细</a> -->
					</div>
					<div class="flex-center" style="height: 30px;">
						<span>登录系统，在账套管理-奖励记录查看</span>
					</div>
					<div style="margin-top: 50px;">
						<span class="rule">活动规则：</span>
						<p>1、被邀请对象仅限于未注册象过河云进销存的新用户。</p>
						<p>2、每个用户每日邀请奖励最高为21天，年邀请奖励上限为360天。同一手机号被视为同一个用户，不再重复发放奖励。</p>
						<p>3、邀请好友成功后，相关奖励会自动发放到邀请方账套，点击账套管理-订单记录查看奖励到账情况。</p>
						<p>4、每邀请1人注册云进销存成功，送使用期限增加7天；邀请用户购买云进销存成功，送使用期限增加30天，以此类推；</p>
						<p>5、通过非正常手段（包括但不限于批量注册、马甲账号、虚拟手机号）邀请好友，象过河云进销存有权清除其邀请数据，取消其奖励资格。</p>
						<p>6、此活动最终解释权归郑州象过河软件技术有限公司所有。</p>
					</div>
				</div>
			</div>
			<div class="bottom-view"></div>
		</div>
		<script>
			function copyUrl() {
				let url = window.location.search
				let bookId = url.split('?abCode=')[1]
				let baseUrl = App.data().url + bookId
				const inputo = document.createElement("input");
				document.body.appendChild(inputo);
				inputo.value = baseUrl;
				inputo.setAttribute('readOnly', 'readOnly')
				inputo.select();
				document.execCommand("Copy");
				document.body.removeChild(inputo);
				window.alert('复制成功！')
			}
		</script>
		<script>
			const App = {
				data() {
					return {
						list: [],
						
						// url: 'http://192.168.2.65:9047/invite/?abCode=',
						// api: 'http://192.168.3.106:10030/api',
						
						url: 'https://yun.xiangguohe.cn/?abCode=',
						api: 'https://yun.xiangguohe.cn/api',
					}
				},
				created() {
					let url = window.location.search
					let that = this
					if (url.indexOf('?abCode=') > -1) {
						let bookId = url.split('?abCode=')[1]
						this.url = this.url + bookId
						$.ajax({
							type: "get", // 请求方式
							url: this.api + '/xghrewardrecord/xghRewardRecord/list', // 请求路径
							dataType: "json", // 预期返回一个 json 类型数据
							data: {
								xghAccountBookId: bookId
							},
							success: function(res) {
								console.log(res);
								let data = res.result || []
								let min = Math.min(3, data.length)
								let result = []
								for (var i = 0; i < min; i++) {
									let item = data[i]
									if (item.inviteType == 1) {
										item.typeText = '注册'
									} else if (item.inviteType == 2) {
										item.typeText = '购买'
									}else{
										item.typeText = ''
									}
									let sub = item.phone.substring(3, 7)
									item.phone = item.phone.replace(sub, '****')
									result.push(item)
								}
								that.list = result
							},
							error: function(xhr) {
								// 只有请求不正常才会执行（状态码不为200）
								console.log(xhr)
							},
						});
					}
				},
				method: {
					copyUrl() {
						console.log(123);
						const str = this.url;
						const inputo = document.createElement("input");
						document.body.appendChild(inputo);
						inputo.value = str;
						inputo.setAttribute('readOnly', 'readOnly')
						inputo.select();
						document.execCommand("Copy");
						document.body.removeChild(inputo);
					}
				}
			};
			Vue.createApp(App).mount('#app');
		</script>
	</body>
</html>